<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${basePath }/public/hplus-4.1.0/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${basePath }/public/hplus-4.1.0/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="${basePath }/public/hplus-4.1.0/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="${basePath }/public/hplus-4.1.0/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="${basePath }/public/hplus-4.1.0/css/animate.min.css" rel="stylesheet">
    <link href="${basePath }/public/hplus-4.1.0/css/style.min862f.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content" id="app">
        <div class="row" id="showPanel">
        	<!-- 订单 -->
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">全部</span>
                        <h5>订单数：全部 / 当月 / 当日</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins orderAmount"  >2000 / 1000 / 50</h1>
                        <div class="stat-percent font-bold text-success">100%<i class="fa fa-bolt"></i>
                        </div>
                        <small>数量</small>
                    </div>
                </div>
            </div>
            <!-- 活跃用户（账户） -->
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全部</span>
                        <h5>账户数：全部 / 当月活跃 / 当日活跃</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins orderNum"  >2000 / 1000 / 50</h1>
                        <div class="stat-percent font-bold text-info">100% <i class="fa fa-level-up"></i>
                        </div>
                        <small>数量</small>
                    </div>
                </div>
            </div>
            <!-- 当月总收支 -->
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">当月</span>
                        <h5>总收支：收入 / 支出 / 余额</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"  >2000 / 1000 / 50</h1>
                        <div class="stat-percent font-bold text-navy">100% <i class="fa fa-level-up"></i>
                        </div>
                        <small>金额</small>
                    </div>
                </div>
            </div>
           
        </div>
        <!-- 当月项目订单处理状态-柱状图 -->
        <div class="row">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div id="histogram" style="width: 1000px;height:400px;"></div>
                    </div>
                </div>
            </div>
            
           <!-- 当月项目订单数量占比-饼图 -->
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                       	<div id="pie" style="width: 400px;height:400px;"></div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script src="${basePath }/public/hplus-4.1.0/js/jquery.min.js?v=2.1.4"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/demo/peity-demo.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/content.min.js?v=1.0.0"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/demo/sparkline-demo.min.js"></script>
    
    <!--jqgrid-->
    <link href="${basePath }/public/hplus-4.1.0/css/plugins/jqgrid/ui.jqgridffe4.css" rel="stylesheet">
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jqgrid/jquery.jqGrid.minffe4.js"></script>
    <script src="${basePath }/public/hplus-4.1.0/js/plugins/jqgrid/i18n/grid.locale-cnffe4.js"></script>
    <script src="${basePath }/public/js/jquery/jquery.contextmenu.js"></script>
    
    <!-- 基于jqgrid-table的数据列表工具 -->
	<script src="${basePath }/public/js/jqGridTable.js"></script>
	
	<script src="${basePath }/public/js/echarts.min.js"></script>
	
	<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
	
	<script src="${basePath }/public/js/utils/string.js"></script>
	<!-- animejs -->
	<script src="${basePath }/public/plugins/animejs/anime.min.js"></script>
	<script>
    	/**
	 * ajax请求并返回结果
	 * @param url
	 * @param data
	 * @param callback
	 * @returns {String}
	 */
	var ajaxFunc = function(url, data, dataType, callback){
		if(dataType == undefined || dataType == null){
			dataType = "html";
		}
		var result = "";
		$.ajax({
			type : "post",
			url : encodeURI(encodeURI(url)),
			data : data,
			dataType : dataType,
			contentType: "application/x-www-form-urlencoded; charset=UTF-8",
			async: false,
			cache: false,
			beforeSend: function(XMLHttpRequest){},
    		success: function(data, textStatus){
    			result = data;
				//扩展回调函数
				if( callback != null ){
					callback(result);
				}
    		},
    		complete: function(XMLHttpRequest, textStatus){},
    		error: function(XMLHttpRequest, textStatus, errorThrown){}
		});
		return result;
	}
    </script>
    
    <script>
		$(function () {
			showHistogram();
    		showPie();
		});
		//柱状图
		function showHistogram(){
	        // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('histogram'));
	        // 指定图表的配置项和数据
	        var option = {
	         	title: {
				        text: '当月项目订单处理状态',
				        subtext: '',
				        left: 'center'
				},
			    legend: { top: 30},
			     grid: {
			        bottom: 30,
			        top: 80
			    },
			    tooltip: {},
			    dataset: {
			        source: [
					            ['product', '2015', '2016', '2017'],
					            ['Matcha Latte', 43.3, 85.8, 93.7],
					            ['Milk Tea', 83.1, 73.4, 55.1],
					            ['Cheese Cocoa', 86.4, 65.2, 82.5],
					            ['Walnut Brownie', 72.4, 53.9, 39.1]
					        ]
			    },
			    xAxis: {type: 'category'},
			    yAxis: {},
			    // Declare several bar series, each will be mapped
			    // to a column of dataset.source by default.
			    series: [
			        {type: 'bar'},
			        {type: 'bar'},
			        {type: 'bar'},
			        {type: 'bar'},
			        {type: 'bar'}
			    ]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
        }
		
		function showPie(){
	        // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('pie'));
	        // 指定图表的配置项和数据
	        var option = {
				    title: {
				        text: '当月项目订单数量占比',
				        subtext: '',
				        left: 'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        // orient: 'vertical',
				        // top: 'middle',
				        bottom: 10,
				        left: 'center',
				        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				    },
				    series : [
				        {
				            type: 'pie',
				            radius : '65%',
				            center: ['50%', '50%'],
				            selectedMode: 'single',
				            data:[
					                {value:335, name:'直接访问'},
					                {value:310, name:'邮件营销'},
					                {value:234, name:'联盟广告'},
					                {value:135, name:'视频广告'},
					                {value:1548, name:'搜索引擎'}
					            ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
	
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
        }
    </script>
    
</body>
</html>
